<template>
    <div class="sais-dormitory">
        <dormitory-header></dormitory-header>
        <div class="sais-dormitory-sidebar">
            <el-menu
                    router
                    :default-active="activeIndex">
                <template v-for="menuTree in menuTrees">
                    <el-menu-item v-if="menuTree.type == 2 || (menuTree.type == 0 && menuTree.children.length == 0)" :index="menuTree.routing">
                        <i class="el-icon-setting"></i>
                        <span slot="title">{{menuTree.name}}</span>
                    </el-menu-item>
                    <el-submenu v-if="menuTree.type == 0 && menuTree.children.length != 0" :index="menuTree.routing">
                        <template slot="title">
                            <i class="el-icon-setting"></i>
                            <span slot="title">{{menuTree.name}}</span>
                        </template>
                        <el-menu-item v-for="menu in menuTree.children" :index="menu.routing">
                            <i class="el-icon-setting"></i>
                            <span slot="title">{{menu.name}}</span>
                        </el-menu-item>
                    </el-submenu>
                </template>
            </el-menu>
        </div>
        <div class="sais-dormitory-content">
            <router-view/>
        </div>
    </div>
</template>

<script>
    import DormitoryHeader from "./components/DormitoryHeader";

    import MenuUtil from "../../utils/MenuUtil"
    import PageSizeUtils from "../../utils/PageSizeUtils"

    import {listMenuByUser, } from "../../api/platform/menu"
    import {getLoginUser} from "../../api/platform/login";

    export default {
        name: "Dormitory",
        components: {DormitoryHeader},
        data() {
            return {
                activeIndex: "",
                menuTrees: [],
                userInfo: {},

            };
        },
        methods: {
            getLoginUser() {
                getLoginUser().then(response => {
                    this.userInfo = response.data.loginUser;
                    this.listMenuByUser(this.userInfo.ukId);
                }).catch(error => {
                    console.log(error)
                })
            },
            listMenuByUser(userId) {
                listMenuByUser(userId).then(response => {
                    this.menuTrees = response.data.menus;
                }).catch(error => {
                    console.log(error)
                })
            },
            setPage() {
                PageSizeUtils.pageSize("sais-dormitory-content")
            },

        },
        created() {
            this.activeIndex = MenuUtil.activeMenu(this.$route.path, 2);
            this.setPage();
            this.getLoginUser();
        },
    }
</script>

<style scoped>
    .sais-dormitory {
        width: 100%;
        height: 100%;
    }

    .sais-dormitory-sidebar {
        width: 201px;
        height: calc(100% - 61px);
        border-right: #cccccc 1px solid;
        background-color: #ffffff;
        float: left;
        overflow-x: hidden;
        overflow-y: auto;
    }
    .sais-dormitory-content {
        padding: 5px;
        width: calc(100% - 225px);
        height: calc(100% - 111px);
        background-color: white;
        overflow-x: hidden;
        overflow-y: auto;
        float: left;
    }
</style>
